<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flexbox centering</title>
<style>
  html { height: 100% ;}
  body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90%;
  }
  div {
    max-width: 40%;
    background-color: #CCC;
    padding: 20px;
    border-radius: 10px
  }
</style>
</head>
<body>
  <div>
    <h1>This box is centered.</h1>
    <p>Tkjklj dsflkj sdkljf klsjd fklj sdafklj sdklfj lskdjf lksjd fkljs dflkj sdkflj skldjf klsjad fkljs. Tkjklj dsflkj sdkljf klsjd fklj sdafklj sdklfj lskdjf lksjd fkljs dflkj sdkflj skldjf klsjad fkljs. Tkjklj dsflkj sdkljf klsjd fklj sdafklj sdklfj lskdjf lksjd fkljs dflkj sdkflj skldjf klsjad fkljs</p>
  </div>
</body>
</html>